<!DOCTYPE html>
<html lang="zh-cn">
 
<head>
    <meta charset="utf-8">
	<base href="../../">
	<title>审批管理 - Powered By jiadao</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
	<meta http-equiv="Expires" content="0"><meta http-equiv="Cache-Control" content="no-cache"><meta http-equiv="Cache-Control" content="no-store">
	<script src="js/jquery-1.8.3.min.js" type="text/javascript"></script>
	<link href="css/bootstrap.min.css" type="text/css" rel="stylesheet" />

	<link href="css/jquery.dataTables.min.css" type="text/css" rel="stylesheet" />
	<script src="js/jquery.dataTables.min.js" type="text/javascript"></script> 
	
	<script src="js/Sortable.js" type="text/javascript"></script>
	<script src="js/common.js" type="text/javascript"></script>
	<script src="js/vue.js"></script>
	<style>
		.table-column-select{
			width: 100px;
		}
		.placeholder{
			height: 50px;
			border: gray solid 1px;
			background-color: gray;
		}
		table.dataTable.nowrap th, table.dataTable.nowrap td{
			white-space: normal !important;
		}

	</style>
</head>
<body>
		<div id="app">
			<div class="container">
				<h3>审批详情</h3>
				
				<div class="row-fluid" style="padding-top: 20px;" >
					<p id="dataInfo"></p>
					
				</div>
				<h3>审批流程图</h3>
				<img id="instanceImage" :src="instanceImageSrc">
				<div class="row-fluid">
					<div class="span12">
						<table id="data_table" class="table table-bordered table-striped"></table>
					</div>
				</div>

			</div>
			
		</div>

<script type="text/javascript">
	var data_table = null
	
	var data_delet_url = 'api/delete/deleteProcess'
	var process_deploy_url = 'api/delete/deleteProcess'
 
	function rebuildTable(url){
		
		if(data_table != null){
			//销毁对象
			data_table.destroy()
			//清空dom
			$('#data_table').empty()
		}
		//复制resultHeaders对象，不然会被DataTable修改，添加额外信息
		var result_headers = $.extend(true, [], processData.resultHeaders);
		
		data_table = $('#data_table').DataTable( {
				renderer: "bootstrap",
				ajax:{
					url:url,
					type:'get',
				},
				destroy: true,
				ordering:false,
				paging: true,
				lengthChange: false,
				pageLength: 5,
				searching:false,
				//data: data,
				// scrollX:true,//水平滚动
				// autoWidth:true,
				columns:  result_headers,
				language:datatable_language,
				autoWidth: false,
				columnDefs:[
					{
						"targets":[4],
						"render": function ( data, type, row, meta ) {
							var msg = JSON.parse(row.message)
							var result = ''
							if(msg.result == '0'){
								result = '初次提交'
							}else if(msg.result == '1'){
								result = '同意'
							}else if(msg.result == '-1'){
								result = '拒绝'
							}else if(msg.result == '2'){
								result = '重新提交'
							}
							return '操作:'+result+'<br>审批语:'+msg.msg
						}
                     } 
                ]
				
		});

	}

	$(function(){
		$('#data_table tbody').on( 'click', 'button', function () {
            var data = data_table.row( $(this).parents('tr') ).data();
			console.log(JSON.stringify(data))
			var params = {}
			if(this.name == 'yes'){
				params = {result:'1',msg:'同意！'}
			}
			else if(this.name == 'no'){
				params = {result:'-1',msg:'不同意！'}
			}
			$.ajax({
				type:'post',
				url:"process/comment/" + data.instance_id,
				data:JSON.stringify(params) ,
				contentType:"application/json;charset=UTF-8",
			})
			.done(function(data) {
				if (data.code==CODE_SUCCESS) {
					alert("处理成功")
					data_table.ajax.reload();
				}
				else{
					alert("处理失败")
				}
			})
			.fail(function() {
				alert("error");
			});
        });
	})
	</script>

	<script>
	var processData ={
			instanceImageSrc:'',
			resultHeaders:[{'title':'id','data':'id',width:"30px"},
			{'title':'TaskId','data':'taskId',width:"60px"},
			{'title':'Time','data':'time',width:"60px"},
			{'title':'UserId','data':'userId', width:"60px"},
			{'title':'审批内容', 'data':'message',width:"60px"}]
	}

	var app = new Vue({
		el: '#app',
		data: processData,

		mounted:function(){
			var instance_id =  getUrlParam("instance_id")
			var data_id =  getUrlParam("data_id")
			processData.instanceImageSrc = 'process/getInstanceImage/'+instance_id
			var data_list_url = "process/comment/" + instance_id
			rebuildTable(data_list_url) 

			$("#dataInfo").load("http://localhost:8088/api/fetch/fetchLeave?id="+data_id);
		},
		methods:{
			

		},
		computed:{
			
		}
	})
</script>
</body>
</html>